WebXR Hit-Testing: Der ultimative Leitfaden zur Platzierung von und Interaktion mit 3D-Objekten in Augmented Reality

Stellen Sie sich vor, Sie richten Ihr Smartphone auf Ihr Wohnzimmer und platzieren mit einem einfachen Tippen ein fotorealistisches virtuelles Sofa genau dort, wo Sie es haben möchten. Sie gehen darum herum, sehen, wie es in den Raum passt, und ändern sogar seine Farbe. Das ist keine Science-Fiction; das ist die Macht der Augmented Reality (AR), die über das Web bereitgestellt wird, und die Kerntechnologie, die dies ermöglicht, ist das WebXR Hit-Testing.

Für Entwickler, Designer und Innovatoren auf der ganzen Welt ist das Verständnis von Hit-Testing der Schlüssel zur Erschließung bedeutungsvoller AR-Erlebnisse. Es ist die grundlegende Brücke zwischen der digitalen und der physischen Welt, die es ermöglicht, virtuelle Inhalte in der realen Umgebung eines Benutzers verankert und interaktiv erscheinen zu lassen. Dieser Leitfaden bietet einen tiefen Einblick in die WebXR Hit Test API und vermittelt Ihnen das Wissen, um überzeugende, weltbezogene AR-Anwendungen für ein globales Publikum zu erstellen.

Die Grundlagen des WebXR Hit-Testings verstehen

Bevor wir uns dem Code zuwenden, ist es entscheidend, die konzeptionelle Grundlage des Hit-Testings zu verstehen. Im Kern geht es beim Hit-Testing darum, eine einfache Frage zu beantworten: „Wenn ich mit meinem Gerät in die reale Welt zeige, welche Oberfläche treffe ich dann?“

Das Kernkonzept: Raycasting in der realen Welt

Der Prozess ist konzeptionell dem Raycasting in der traditionellen 3D-Grafik ähnlich, jedoch mit einer wesentlichen Besonderheit. Anstatt einen Strahl in eine rein virtuelle Szene zu werfen, wirft das WebXR Hit-Testing einen Strahl vom Gerät des Benutzers in die physische Welt.

So funktioniert es:

• Umgebungserfassung: Mithilfe der Gerätekamera und Bewegungssensoren (wie der IMU - Inertial Measurement Unit) scannt das zugrunde liegende AR-System (wie ARCore auf Android oder ARKit auf iOS) ständig die Umgebung des Benutzers und erstellt eine vereinfachte 3D-Karte davon. Diese Karte besteht aus Merkmalspunkten, erkannten Ebenen (wie Böden, Wänden und Tischplatten) und manchmal auch komplexeren Meshes.
• Projektion des Strahls: Ein Strahl, der im Wesentlichen eine gerade Linie mit einem Ursprung und einer Richtung ist, wird von einem Ursprungspunkt aus projiziert. Meistens geschieht dies von der Mitte des Benutzerbildschirms nach außen.
• Finden des Schnittpunkts: Das System prüft, ob dieser projizierte Strahl eine der erkannten realen Geometrien schneidet.
• Das 'Hit-Ergebnis': Wenn eine Schnittmenge auftritt, gibt das System ein „Hit-Ergebnis“ zurück. Dieses Ergebnis ist mehr als nur ein 'Ja' oder 'Nein'; es enthält wertvolle Daten, vor allem die Pose (Position und Ausrichtung) des Schnittpunkts im 3D-Raum. Diese Pose ermöglicht es Ihnen, ein virtuelles Objekt perfekt an der realen Oberfläche auszurichten.

Die WebXR Device API und das Hit-Test-Modul

Die WebXR Device API ist der W3C-Standard, der den Zugriff auf Virtual- und Augmented-Reality-Geräte im Web ermöglicht. Die Hit Test API ist ein optionales Modul innerhalb dieses Standards, das speziell für AR entwickelt wurde. Um es zu verwenden, müssen Sie es bei der Initialisierung einer WebXR-Sitzung explizit anfordern.

Das Schlüsselobjekt, mit dem Sie arbeiten werden, ist die XRHitTestSource. Sie fordern diese Quelle von einer aktiven XRSession an, und sobald Sie sie haben, können Sie sie in jedem Frame Ihrer Render-Schleife abfragen, um die neuesten Hit-Test-Ergebnisse zu erhalten.

Arten von Referenzräumen: Ihr Anker in der Realität

Alle Koordinaten in WebXR existieren innerhalb eines 'Referenzraums' (reference space), der den Ursprung (den 0,0,0-Punkt) Ihrer 3D-Welt definiert. Die Wahl des Referenzraums ist für AR entscheidend.

• viewer: Der Ursprung ist an das Gerät oder den Kopf des Benutzers gebunden. Wenn sich der Benutzer bewegt, bewegt sich die Welt mit ihm. Dies ist nützlich für Benutzeroberflächenelemente, die immer vor dem Benutzer sein sollen (wie ein Head-up-Display), aber es ist nicht geeignet, um Objekte zu platzieren, die in der realen Welt fixiert bleiben sollen.
• local: Der Ursprung wird bei oder in der Nähe der Position des Benutzers zu Beginn der Sitzung festgelegt. Er ist relativ zum Ausgangspunkt des Benutzers stationär, versucht aber nicht, sich in der realen Welt zu verankern. In diesem Raum platzierte Objekte bleiben an Ort und Stelle, wenn der Benutzer umhergeht, können aber im Laufe der Zeit durch die Anhäufung von Sensorfehlern abdriften.
• unbounded: Entwickelt für weltweite Erlebnisse, bei denen ein Benutzer sich sehr weit von seinem Ausgangspunkt entfernen könnte. Das System kann die Position des Ursprungs anpassen, um die Tracking-Genauigkeit aufrechtzuerhalten. Dies ist oft eine gute Wahl für raumfüllendes AR (Room-Scale AR).
• local-floor: Ähnlich wie `local`, aber der Ursprung wird speziell auf Bodenhöhe festgelegt, was es sehr praktisch macht, Objekte auf dem Boden zu platzieren.

Für die meisten Szenarien der AR-Objektplatzierung werden Sie einen weltverankerten Raum wie local, local-floor oder unbounded verwenden, um sicherzustellen, dass Ihre virtuellen Objekte in der physischen Umgebung stabil bleiben.

Implementierung Ihres ersten WebXR Hit-Tests: Eine praktische Anleitung

Kommen wir von der Theorie zur Praxis. Die folgenden Beispiele verwenden die rohe WebXR API. In einem realen Projekt würden Sie wahrscheinlich eine Bibliothek wie Three.js oder Babylon.js für das Rendering verwenden, aber die WebXR-spezifische Logik bleibt dieselbe.

Schritt 1: Einrichten der Szene und Anfordern einer Sitzung

Zuerst benötigen Sie eine HTML-Schaltfläche zum Starten des AR-Erlebnisses und ein grundlegendes JavaScript-Setup. Der wichtigste Teil ist die Anforderung einer Sitzung im 'immersive-ar'-Modus und die Aufnahme von 'hit-test' in die erforderlichen Funktionen (required features).

            // HTML
<button id="ar-button">Start AR</button>

// JavaScript
const arButton = document.getElementById('ar-button');
let xrSession = null;
let xrReferenceSpace = null;

async function onARButtonClick() {
  if (navigator.xr) {
    try {
      // Prüfen, ob der 'immersive-ar'-Modus unterstützt wird
      const isSupported = await navigator.xr.isSessionSupported('immersive-ar');
      if (isSupported) {
        // Eine Sitzung mit den erforderlichen Funktionen anfordern
        xrSession = await navigator.xr.requestSession('immersive-ar', {
          requiredFeatures: ['hit-test']
        });

        // Sitzung, Canvas und WebGL-Kontext einrichten...
        // ... (Boilerplate für die Einrichtung des Renderings)

        // Die Render-Schleife starten
        xrSession.requestAnimationFrame(onXRFrame);
      } else {
        console.log("AR not supported on this device.");
      }
    } catch (e) {
      console.error("Failed to start AR session:", e);
    }
  }
}

arButton.addEventListener('click', onARButtonClick);

            

              
                Copy
              
            
          

Schritt 2: Anfordern einer Hit-Test-Quelle

Sobald die Sitzung startet, müssen Sie einen Referenzraum einrichten und dann Ihre Hit-Test-Quelle anfordern. Dies geschieht normalerweise direkt nach der Erstellung der Sitzung.

            // Innerhalb Ihrer Logik zum Einrichten der Sitzung...
xrSession.addEventListener('end', onSessionEnded);

// Einen Referenzraum erstellen. 'viewer' wird für die Hit-Test-Anfrage benötigt,
// aber wir werden einen 'local-floor'-Raum zum Platzieren von Inhalten verwenden.
xrReferenceSpace = await xrSession.requestReferenceSpace('local-floor');
const viewerSpace = await xrSession.requestReferenceSpace('viewer');

// Die Hit-Test-Quelle anfordern
const hitTestSource = await xrSession.requestHitTestSource({ space: viewerSpace });

// Jetzt müssen wir 'hitTestSource' an unsere Render-Schleife übergeben.

            

              
                Copy
              
            
          

Hinweis: Wir fordern die Hit-Test-Quelle unter Verwendung des viewer-Raums an. Das bedeutet, der Strahl geht von der Perspektive des Geräts aus. Wir verwenden jedoch den local-floor-Referenzraum, um Objekte zu platzieren, sodass ihre Koordinaten relativ zu einem stabilen Punkt in der Welt sind.

Schritt 3: Ausführen des Hit-Tests in der Render-Schleife

Die Magie geschieht innerhalb des onXRFrame-Callbacks, der für jeden zu rendernden Frame aufgerufen wird. Hier erhalten Sie die neuesten Hit-Test-Ergebnisse.

            let reticle = null; // Dies wird unser 3D-Objekt für den visuellen Indikator sein
let hitTestSource = null; // Annahme, dass dies aus dem Einrichtungsschritt übergeben wird

function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  // Die Pose des Betrachters abrufen
  const pose = frame.getViewerPose(xrReferenceSpace);
  if (!pose) return;

  // Wenn wir eine Hit-Test-Quelle haben, die Ergebnisse abrufen
  if (hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);

    if (hitTestResults.length > 0) {
      // Wir haben einen Treffer!
      const hit = hitTestResults[0];

      // Die Pose des Trefferpunktes abrufen
      const hitPose = hit.getPose(xrReferenceSpace);

      // Wir können jetzt hitPose.transform.position und hitPose.transform.orientation verwenden
      // um unseren visuellen Indikator (das Reticle) zu positionieren.
      if (reticle) {
        reticle.visible = true;
        reticle.matrix.fromArray(hitPose.transform.matrix);
      }
    } else {
      // Für diesen Frame wurde kein Treffer gefunden
      if (reticle) {
        reticle.visible = false;
      }
    }
  }

  // ... restliche Rendering-Logik für die Szene
}

            

              
                Copy
              
            
          

Schritt 4: Visualisierung des Trefferpunktes mit einem Reticle

Benutzer benötigen visuelles Feedback, um zu wissen, wo sie ein Objekt platzieren können. Ein 'Reticle' – ein kleines 3D-Objekt wie ein Ring oder ein flacher Kreis – ist dafür perfekt. In Ihrer 3D-Bibliothek (z. B. Three.js) würden Sie ein Mesh für das Reticle erstellen. Der Code im vorherigen Schritt zeigt, wie seine Position und Sichtbarkeit aktualisiert werden.

• Wenn hitTestResults.length > 0 ist, machen Sie das Reticle sichtbar und aktualisieren seine Transformation (Position und Rotation) mithilfe der hitPose.
• Wenn es keine Treffer gibt, machen Sie das Reticle unsichtbar.

Dies bietet sofortiges und intuitives Feedback und leitet den Benutzer an, eine geeignete Oberfläche für die Objektplatzierung zu finden.

Fortgeschrittene Techniken und Best Practices für die Objektplatzierung

Einen einfachen Hit-Test zum Laufen zu bringen, ist nur der Anfang. Um ein professionelles und benutzerfreundliches Erlebnis zu schaffen, sollten Sie diese fortgeschrittenen Techniken in Betracht ziehen.

Vom Reticle zur Platzierung: Umgang mit Benutzereingaben

Das ultimative Ziel ist es, ein permanentes Objekt zu platzieren. WebXR bietet hierfür einen einfachen Eingabemechanismus: das 'select'-Ereignis. Dieses Ereignis wird ausgelöst, wenn der Benutzer eine primäre Aktion ausführt, was bei Handheld-Geräten typischerweise ein Tippen auf den Bildschirm ist.

            xrSession.addEventListener('select', onSelect);

function onSelect() {
  if (reticle && reticle.visible) {
    // Der Benutzer hat auf den Bildschirm getippt, während das Reticle auf einer Oberfläche sichtbar ist
    // Ein neues 3D-Objekt erstellen (z. B. ein Sonnenblumenmodell)
    const objectToPlace = createSunflowerModel(); // Ihre Funktion zur Erstellung von 3D-Objekten

    // Seine Position und Ausrichtung so einstellen, dass sie mit dem Reticle übereinstimmen
    objectToPlace.position.copy(reticle.position);
    objectToPlace.quaternion.copy(reticle.quaternion);

    // Es zu Ihrer Szene hinzufügen
    scene.add(objectToPlace);
  }
}

            

              
                Copy
              
            
          

Dieses Muster ist fundamental: Verwenden Sie den Hit-Test, um kontinuierlich ein temporäres 'Geister'- oder 'Reticle'-Objekt zu positionieren, und verwenden Sie dann das select-Ereignis, um eine permanente Kopie der Transformation dieses Objekts zu erstellen.

Stabilisierung des Platzierungserlebnisses

Rohdaten von Sensoren können verrauscht sein, was dazu führt, dass das Hit-Test-Ergebnis – und damit Ihr Reticle – leicht zittert, selbst wenn das Gerät ruhig gehalten wird. Dies kann für den Benutzer störend sein. Eine einfache Lösung ist die Anwendung einer Glättung auf die Bewegung des Reticles mithilfe einer Technik wie der linearen Interpolation (LERP).

            // In Ihrer onXRFrame-Schleife, anstatt die Position direkt zu setzen:

const targetPosition = new THREE.Vector3();
targetPosition.setFromMatrixPosition(hitPose.transform.matrix);

// Das Reticle sanft zur Zielposition bewegen
// Der Wert 0.1 steuert die Glättungsgeschwindigkeit (niedriger ist sanfter)
reticle.position.lerp(targetPosition, 0.1);

// Dasselbe können Sie für die Ausrichtung mit slerp (Spherical Linear Interpolation) tun
const targetQuaternion = new THREE.Quaternion();
targetQuaternion.setFromRotationMatrix(hitPose.transform.matrix);
reticle.quaternion.slerp(targetQuaternion, 0.1);

            

              
                Copy
              
            
          

Verständnis der Hit-Test-Quelloptionen

Die Methode requestHitTestSource kann ein Options-Objekt entgegennehmen, um zu verfeinern, wonach Sie suchen. Die Eigenschaft entityTypes ist besonders nützlich:

• entityTypes: ['plane']: Dies gibt nur Treffer auf erkannten flachen Oberflächen wie Böden, Tischen und Wänden zurück. Dies ist oft die wünschenswerteste Option für die Platzierung von Objekten wie Möbeln oder virtuellen Bildschirmen.
• entityTypes: ['point']: Dies gibt Treffer auf Merkmalspunkten (feature points) zurück, die visuell unterscheidbare Punkte in der Umgebung sind, die das System verfolgt. Dies kann weniger stabil als Ebenen sein, ermöglicht aber die Platzierung in komplexeren, nicht flachen Bereichen.
• entityTypes: ['mesh'] (experimentell): Dies fordert Treffer gegen ein dynamisch generiertes 3D-Mesh der Umgebung an. Wenn verfügbar, ist dies die leistungsstärkste Option, da sie die Platzierung auf jeder Oberfläche ermöglicht, unabhängig von ihrer Form.

Interaktion mit platzierten Objekten

Sobald ein Objekt platziert ist, existiert es in Ihrer virtuellen Szene. Die WebXR Hit Test API wird nicht mehr benötigt, um damit zu interagieren. Stattdessen greifen Sie auf standardmäßige 3D-Techniken zurück.

Um das Tippen eines Benutzers auf ein virtuelles Objekt zu erkennen, führen Sie ein Raycasting innerhalb Ihrer 3D-Szene durch. Bei einem 'select'-Ereignis würden Sie:

1. Einen Strahl erstellen, der von der Position der Kamera ausgeht und in die Richtung zeigt, in die sie blickt.
2. Den Raycaster Ihrer 3D-Bibliothek (z. B. `THREE.Raycaster`) verwenden, um auf Schnittpunkte zwischen diesem Strahl und den Objekten in Ihrer Szene zu prüfen.
3. Wenn ein Schnittpunkt mit einem Ihrer platzierten Objekte gefunden wird, können Sie eine Aktion auslösen, wie z. B. die Farbe ändern, eine Animation abspielen oder es löschen.

Es ist entscheidend, diese beiden Konzepte zu unterscheiden: Hit-Testing dient dem Finden von Oberflächen in der realen Welt. Raycasting dient dem Finden von Objekten in Ihrer virtuellen Szene.

Anwendungen in der realen Welt und globale Anwendungsfälle

WebXR Hit-Testing ist nicht nur eine technische Kuriosität; es ermöglicht leistungsstarke Anwendungen in Branchen weltweit.

• E-Commerce und Einzelhandel: Globale Marken können Kunden aus jedem Land ermöglichen, Produkte vor dem Kauf in ihren eigenen vier Wänden zu visualisieren. Ein Möbelunternehmen in Schweden kann einem Kunden in Japan zeigen lassen, wie ein neuer Tisch in seinem Esszimmer aussieht.
• AEC (Architektur, Ingenieurwesen, Bauwesen): Ein Architekturbüro in Brasilien kann einen WebAR-Link mit einem Kunden in Deutschland teilen, der es ihm ermöglicht, auf der tatsächlichen Baustelle in einem virtuellen 1:1-Modell eines geplanten Gebäudes herumzulaufen.
• Bildung und Ausbildung: Eine medizinische Fakultät in Indien kann Studenten ein webbasiertes AR-Tool zur Verfügung stellen, um ein virtuelles menschliches Herz auf ihrem Schreibtisch zu platzieren und zu sezieren, wodurch komplexes Lernen ohne teure Hardware zugänglich wird.
• Marketing und Kunst: Künstler und Marken können standortbezogene AR-Erlebnisse schaffen, die es Benutzern ermöglichen, digitale Skulpturen in öffentlichen Parks zu platzieren oder ein neues Automodell in ihrer eigenen Einfahrt geparkt zu sehen, zugänglich für jeden mit einem kompatiblen Smartphone.

Herausforderungen und die Zukunft des WebXR Hit-Testings

Obwohl leistungsstark, entwickelt sich die Technologie noch weiter. Entwickler sollten sich der aktuellen Herausforderungen und zukünftigen Trends bewusst sein.

Geräte- und Browserkompatibilität

Die Unterstützung für WebXR wächst, ist aber noch nicht universell. Sie ist hauptsächlich auf modernen Android-Geräten über Google Chrome verfügbar. Die Unterstützung auf iOS ist begrenzter und erfordert oft spezielle experimentelle Browser. Entwerfen Sie immer mit graceful degradation (kontrollierter Feature-Reduzierung) im Hinterkopf – bieten Sie eine alternative 3D-Viewer-Erfahrung für Benutzer auf nicht AR-fähigen Geräten an.

Einschränkungen bei der Umgebungserfassung

Die Qualität des Hit-Testings hängt stark von der physischen Umgebung ab. Unter bestimmten Bedingungen kann es Schwierigkeiten geben:

• Schlechte Beleuchtung: Schwach beleuchtete Räume sind für die Kamera schwer zu verarbeiten.
• Merkmalslose Oberflächen: Einer großen, einfarbig weißen Wand oder einem glänzend schwarzen Boden fehlen die für das Tracking erforderlichen visuellen Merkmale.
• Reflektierende oder transparente Oberflächen: Spiegel und Glas können die Sensoren des Systems verwirren.

Zukünftige Entwicklungen in KI und Computer Vision werden zu einem robusteren semantischen Verständnis führen, bei dem das Gerät nicht nur eine 'Ebene' sieht, sondern einen 'Boden', eine 'Wand' oder einen 'Tisch' erkennt, was intelligentere Interaktionen ermöglicht.

Der Aufstieg der Depth und Mesh APIs

Die Zukunft des Hit-Testings liegt in fortschrittlicheren Umgebungsdaten. Aufkommende WebXR APIs werden dies revolutionieren:

• WebXR Depth Sensing API: Liefert pro Pixel Tiefeninformationen von der Kamera, was eine viel detailliertere Erfassung der realen Geometrie ermöglicht. Dies ermöglicht, dass virtuelle Objekte von realen Objekten korrekt verdeckt werden (z. B. eine virtuelle Figur, die hinter einer echten Couch entlanggeht).
• Real-World Geometry (Mesh API): Diese API liefert ein dynamisches 3D-Mesh der Umgebung in Echtzeit. Das Hit-Testing gegen dieses Mesh ermöglicht eine perfekte Platzierung auf jeder Oberfläche, egal wie komplex, von einem Stapel Bücher bis zu einer zerknitterten Decke.

Fazit: Die Brücke zwischen den Welten bauen

WebXR Hit-Testing ist mehr als nur eine API; es ist der grundlegende Mechanismus, der es uns ermöglicht, unsere digitalen Schöpfungen in der physischen Realität zu verankern. Indem Sie verstehen, wie man eine Quelle anfordert, Ergebnisse in einer Render-Schleife verarbeitet und Benutzereingaben handhabt, können Sie intuitive und leistungsstarke AR-Erlebnisse schaffen, die über den Webbrowser für ein riesiges globales Publikum zugänglich sind.

Von der einfachen Objektplatzierung bis hin zu komplexen, interaktiven Anwendungen ist die Beherrschung des Hit-Testings eine unverzichtbare Fähigkeit für jeden Entwickler, der in das immersive Web einsteigt. Während sich die Technologie mit besserer Umgebungserfassung und breiterer Geräteunterstützung weiterentwickelt, wird die Grenze zwischen der physischen und der digitalen Welt immer weiter verschwimmen, und WebXR wird an der Spitze dieser Transformation stehen.